<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>公司产品</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js?c=2"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css?c=2">
</head>
<body>
<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" class="mctag">
        <MCtitle class="mctag">公司产品</MCtitle>
        <div class="content content1 chanpin">
            <h2 class="title">您的公司做什么产品？</h2>
            <p class="desc">请选择，最多选择一个</p>
            <ul class="selecttagul selecttagul1">
                <li class="tagli" value="男装">男装</li>
                <li class="tagli" value="女装">女装</li>
                <li class="tagli" value="童装">童装</li>
            </ul>

            <button id="submit" type="submit" mcname="disabled"
                    class="mui-btn mui-btn-primary">
                下一步
            </button>
        </div>
        <div style="display: none" class="content content2">
            <h2 class="title">针织类</h2>
            <p class="desc">请选择您有的产品款式，选择不上限</p>
            <ul mcname="zhenzhileideList" class="selecttagul selecttagu2 zhenzhileideList">
                <li v-for="li in zhenzhileideList" class="tagli"
                    v-bind:class="{ 'on': li.on }">{{li.text}}</li>
                <li class="tagli plus">添加+</li>
            </ul>
            <h2 class="title">梭织类</h2>
            <p class="desc">请选择您有的产品款式，选择不上限</p>
            <ul mcname="suozhileiArray" class="selecttagul selecttagu2 suozhileiArray">
                <li v-for="li in suozhileiArray" class="tagli"
                    v-bind:class="{ 'on': li.on }">{{li.text}}</li>
                <li class="tagli plus">添加+</li>
            </ul>

            <button id="submit2" type="submit" mcname="disabled2"
                    class="mui-btn mui-btn-primary">完成</button>
        </div>

    </MCform>


</div>

<script type="text/javascript" src="/h5/js/all2.js?c=2"></script>
</body>
<style>
    .mctag .content {
        padding-bottom: 0.03rem;
    }

</style>
<script>

    ///fromapi="/api/app/call/getusers_basechanpin_gs"
    var view = new MC.View.MCform('#Form');
    $('.selecttagul1 .tagli').on('click', function () {
        var obj = $(this);
        $('.selecttagul1 .tagli').removeClass('on');
        obj.addClass('on');
        view.vue.disabled = true;
    });
    $('.selecttagu2').on('click', '.tagli', function () {
        var obj = $(this);
        if (obj.hasClass('on')) {
            obj.removeClass('on');
        } else if (!obj.hasClass('plus')) {
            obj.addClass('on');
        }
    });
    $('#submit').on('click', function () {
         var chanpin=$('.chanpin .tagli.on').text();
        if(chanpin==''){
            MC.msg.alert('产品必须选择');
            return;
        }
        $('.content1').hide();
        $('.content2').show();
    });
    MC.apiD('getusers_basechanpin_gs', {}, function (data) {
        //return;
        var chanpin=data.chanpin;
        if(chanpin&&chanpin!==''){
            $('.chanpin .selecttagul1 .tagli[value='+chanpin+']').addClass('on');
        }

        var zhenzhileideList = data.zhenzhileidefault.split(",");
        var zhenzhilei = data.zhenzhilei.split(",");
        var zhenzhileiArray = [];

        var suozhileiList = data.suozhileidefault.split(",");
        var suozhilei = data.suozhilei.split(",");
        var suozhileiArray = [];
        for (var i = 0; i < zhenzhilei.length; i++) {
            var str = zhenzhilei[i];
            if (str&&str!==''&&zhenzhileideList.indexOf(str) == -1) {
                zhenzhileideList.push(str);
            }
        }
        for (var i = 0; i < zhenzhileideList.length; i++) {
            var str = zhenzhileideList[i];
            var on = false;
            if (zhenzhilei.indexOf(str) != -1) {
                on = true;
            }
            zhenzhileiArray.push({
                text: str,
                on: on
            });
        }
        view.vue.zhenzhileideList = zhenzhileiArray;

        for (var i = 0; i < suozhilei.length; i++) {
            var str = suozhilei[i];
            if (str&&str!==''&&suozhileiList.indexOf(str) == -1) {
                suozhileiList.push(str);
            }
        }
        for (var i = 0; i < suozhileiList.length; i++) {
            var str = suozhileiList[i];
            var on = false;
            if (suozhilei.indexOf(str) != -1) {
                on = true;
            }
            suozhileiArray.push({
                text: str,
                on: on
            });
        }
        view.vue.zhenzhileideList = zhenzhileiArray;
        view.vue.suozhileiArray = suozhileiArray;


        console.log(zhenzhileideList, zhenzhilei, zhenzhileiArray);
    });

    $('.zhenzhileideList .tagli.plus').on('click', function () {
        MC.UI.bottomInputDiv.show(function (text) {
           // alert(text);
            var sel=$('.zhenzhileideList');
            var li=$('<li class="tagli on">'+text+'</li>');
           // sel.append(li);
            sel.append(li);
            sel.append(sel.find('.tagli.plus'));
        });
    });

    $('.suozhileiArray .tagli.plus').on('click', function () {
        MC.UI.bottomInputDiv.show(function (text) {
           // alert(text);
            var sel=$('.suozhileiArray');
            var li=$('<li class="tagli on">'+text+'</li>');
           // sel.append(li);
            sel.append(li);
            sel.append(sel.find('.tagli.plus'));
        });
    });
    $('#submit2').on('click',function(){
        var chanpin=$('.chanpin .tagli.on').text();
        var zhenzhileiList=$('.zhenzhileideList .tagli.on');
        var suozhileiArray=$('.suozhileiArray .tagli.on');
        var zhenzhilei='';
        var suozhilei='';
        if(chanpin==''){
            MC.msg.alert('产品必须选择');
            return;
        }
        let list=[];
        for(var i=0;i<zhenzhileiList.length;i++){
            list.push($(zhenzhileiList[i]).text());
        }
        zhenzhilei=list.join(",");
        list=[];
        for(var i=0;i<suozhileiArray.length;i++){
            list.push($(suozhileiArray[i]).text());
        }
        suozhilei=list.join(",");
        MC.apiD('setusers_basechanpin_gs',{
            chanpin:chanpin,
            zhenzhilei:zhenzhilei,
            suozhilei:suozhilei,
        });
    });

</script>
</body>
</html>


















